<template>
    <table border="1">
        <thead>
            <tr>
                <td>房型名称</td>
                <td>房号</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in Info">
                <td>{{item.T_Name}}</td>
                <td>{{item.N_Name}}</td>
                <td>
                    <input type="button" value="删除" @click="DelInfo(item.O_Id)"/>
                    <input type="button" value="详情" @click="Xiang(item.O_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>

        <span>
        当前共有{{PageInfo.TotalCount}}条数据，每页显示{{PageInfo.PageSize}}条数据，当前第{{PageInfo.PageIndex}}/{{PageInfo.PageCount}}页
        <a href="#" @click="page('F')" style="margin-left:10px;">首页</a>
        <a href="#" @click="page('U')" style="margin-left:10px;">上一页</a>
        <span style="margin-left:10px;">{{PageInfo.PageIndex}}</span>
        <a href="#" @click="page('L')" style="margin-left:10px;">下一页</a>
        <a href="#" @click="page('E')" style="margin-left:10px;">尾页</a>
    </span>

    <select v-model="newSize" style="margin-left:10px;" @click="row">
        <option :value="1">1条/页</option>
        <option :value="2">2条/页</option>
        <option :value="3">3条/页</option>
    </select>

    <input type="text" style="width:20px;margin-left:10px;" v-model="newIndex"/>
    <input type="button" value="跳转" @click="Take"/>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import {useRouter} from 'vue-router'

//创建路由的实例
const router=useRouter();

//生命周期钩子
onMounted(()=>{
    Show();
})

//响应式数据
const Info=ref([{
    O_Id:0,
    T_Id:0,
    T_Name:"",
    N_Id:0,
    N_Name:"",
    O_IsDel:true,
}])

//分页参数
const PageInfo=ref({
    PageIndex:1,
    PageSize:2,
    TotalCount:0,
    PageCount:0
})

//显示数据
const Show=()=>{
    axios.get("https://localhost:7205/api/RoomOrder/ShowRoomOrder",{
        params:{
            PageIndex:PageInfo.value.PageIndex,
            PageSize:PageInfo.value.PageSize,
        }
    })
    .then(res=>{
        Info.value=res.data.Data_Info;
        PageInfo.value.TotalCount=res.data.TotalCount;
        PageInfo.value.PageCount=res.data.PageCount;
    })
}

//翻页
const page=(choose:any)=>{
    switch(choose)
    {
        case"F":
           PageInfo.value.PageIndex=1;
        break;

        case"U":
           if(PageInfo.value.PageIndex>1)
           {
               PageInfo.value.PageIndex=PageInfo.value.PageIndex-1;
           }
           else{
              alert("当前已经是第一页");
           }
        break;

        case"L":
           if(PageInfo.value.PageIndex<PageInfo.value.PageCount)
           {
               PageInfo.value.PageIndex=PageInfo.value.PageIndex+1;
           }
           else{
              alert("当前已经是最后一页");
           }
        break;

        case"E":
           PageInfo.value.PageIndex=PageInfo.value.PageCount;
        break;
    }
    Show();
}

//页容量参数
const newSize=ref(2)

//页容量
const row=()=>{
    PageInfo.value.PageSize=newSize.value;
    Show();
}

//跳转参数
const newIndex=ref()

//跳转
const Take=()=>{
    var nidex=newIndex.value;
    if(nidex=="")
    {
        alert("跳转页码不能为空");
        return;
    }
    PageInfo.value.PageIndex=Number(nidex);
    Show();
}

//删除
const DelInfo=(Oid:number)=>{
    if(confirm("确定要删除吗?"))
    {
        axios.delete("https://localhost:7205/api/RoomOrder/DelRoomOrder?Oid="+Oid)
        .then(res=>{
            if(res.data>0)
            {
                alert("删除成功");
                Show();
            }
            else{
                alert("删除失败");
            }
        })
    }
}

//详情
const Xiang=(Oid:number)=>{
    router.push({
        name:"XiangRoomOrder",
        params:{
            id:Oid
        }
    })
}
</script>